<template>
  <div class="group-friend-add-main">
    <div class="nav-back-header bg_fff flexbetween">
      <div class="back-title flex aligncenter f-14 line_h_22">
        <div class="back-button mr-12 flexcenter commhover">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()" />
        </div>
        <strong>新建手动任务（选择存量群成员）</strong>
      </div>
    </div>
    <div class="add-group-friend-wrap">
      <div class="add-group-friend-content flexcolumn">
        <div class="add-group-friend-filterbox mb-16 bg_fff br_4">
          <div class="head">
            <span class="c_text2 fw-6 f-16">排除条件</span>
            <a class="card-option" v-if="isShow" @click="onChangeFilterBox">收起<i class="el-icon-arrow-down"
                style="font-weight: 500;font-size: 18px;" /></a>
            <a class="card-option flex aligncenter" v-else @click="onChangeFilterBox">展开<i class="el-icon-arrow-up"
                style="font-weight: 500;font-size: 18px;" /></a>
          </div>
          <div class="filter-wrap" v-show="isShow">
            <div class="f-12 c_text3 mb-5">
              排除身份性别
            </div>
            <div class="mb-20">
              <el-checkbox-group v-model="filter.identity">
                <el-checkbox :label="item.id" v-for="(item, index) in identityList" :key="index">
                  <span class="f-14 c_text">{{ item.name }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="input-filter flex">
              <div class="n-keyword">
                <span>排除添加次数</span>
                <div>
                  <el-input v-model="filter.count" size="small" placeholder="不限" style="width: 160px;" />
                  <span> 次及以上</span>
                </div>
              </div>
              <div class="n-keyword">
                <span>排除上次添加时间</span>
                <div>
                  <el-select v-model="filter.date" placeholder="请选择" style="width: 140px;">
                    <el-option v-for="item in dates" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="n-keyword">
                <span>
                  昵称关键词
                  <el-tooltip class="item" effect="dark" content="昵称包含关键词即被剔除" placement="top-start">
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>
                </span>
                <div>
                  <AddKeyword v-model="filter.nicktag" placeholder="可输入多个，按Enter确认" class="mt-13" />
                </div>
              </div>
              <div class="n-keyword">
                <span class="f-12 c_text3">
                  企业名称关键词
                  <el-tooltip class="item" effect="dark" content="企业名称包含关键词即被剔除" placement="top-start">
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>
                </span>
                <div>
                  <AddKeyword v-model="filter.qykeyword" placeholder="可输入多个，按Enter确认" class="mt-13" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-group-friend-message bg_fff br_4 mb-16 p-12 flex">
          <div class="item-label">验证消息：</div>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" maxlength="50" show-word-limit>
          </el-input>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">选择群成员添加</div>
            <span class="tips">
              当前已选 <a>0</a> 个群，共 <a>0</a> 个成员
            </span>
          </div>
          <div class="card-content">
            <div class="add-group-friend-left">
              <div class="search">
                <el-input
                  size="small"
                  v-model="queryParams.groupname"
                  clearable
                  placeholder="搜群名"
                  style="width:145px"
                  class="x-input-select"
                  @keyup.enter.native="handleQuery"
                >
                  <div slot="append">
                    <i class="el-icon-search commhover"></i>
                  </div>
                </el-input>
                <!-- <el-input class="search-input" size="small" placeholder="搜群名" suffix-icon="el-icon-search" /> -->
                <el-button size="small" icon="el-icon-takeaway-box" @click.stop="onSearchGroup">筛选群</el-button>
                <div><el-button size="small" icon="el-icon-refresh" class="refresh-btn"></el-button></div>
              </div>
              <div class="list">
                <div class="room-item" v-for="i in 20" :key="i">
                  <span>1</span>
                  <span class="tag">0/1</span>
                </div>
              </div>
              <div class="drawer-model-wrap" v-show="drawerVisible">
                <div :class="['drawer-model-content', drawerVisible && 'open']">
                  <div class="drawer-model-body">
                    <div class="drawer-row-item">
                      <div class="title">群标签：</div>
                      <MultipleSelectSpread
                        v-model="queryParams.tags"
                        ref="multipleSelectSpread"
                        size="small"
                        placeholder="选择标签"
                        search_placeholder="搜标签组/标签名"
                        :receiverNameOpt="lableOpt"
                      />
                      <!-- <el-select v-model="value" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in groupTags" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select> -->
                    </div>
                    <div class="drawer-row-item">
                      <div class="title">是否群主/管理：</div>
                      <el-select v-model="queryParams.groupmaster" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="drawer-row-item">
                      <div class="title">群人数：</div>
                      <div class="input-rows">
                        <input-number v-model="queryParams.min" placeholder="最小值" width='88px' />
                        <!-- <el-input v-model="queryParams.min" placeholder="最小值" style="width: 88px"/> -->
                        <span class="delimiter">~</span>
                        <input-number v-model="queryParams.max" placeholder="最大值" width='88px' />
                        <!-- <el-input v-model="queryParams.max" placeholder="最大值" style="width: 88px"/> -->
                      </div>
                    </div>
                  </div>
                  <div class="drawer-footer">
                    <el-button type="primary" style="width: 200px;" @click.stop="drawerVisible = false">确定筛选</el-button>
                    <el-button plain style="width: 200px;" @click.stop="drawerVisible = false">清空条件</el-button>
                  </div>
                </div>
                <div class="drawer-model-mask" />
              </div>
            </div>
            <div class="add-group-friend-right">
              <div class="header">
                <el-input
                  size="small"
                  v-model="queryParams.groupmember"
                  clearable
                  placeholder="群成员"
                  style="width:200px"
                  class="x-input-select"
                  @keyup.enter.native="handleQuery"
                >
                  <div slot="append">
                    <i class="el-icon-search commhover"></i>
                  </div>
                </el-input>
                <!-- <el-input class="search-input" size="small" placeholder="群成员" suffix-icon="el-icon-search"
                  style="width: 200px;" /> -->
              </div>
              <el-table ref="addGroupTbale" :data="dataSource" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="60"></el-table-column>
                <el-table-column property="mobile" label="群成员">
                </el-table-column>
                <el-table-column property="name" sortable label="入群时间">
                </el-table-column>
                <el-table-column property="address" sortable label="上次添加">
                </el-table-column>
                <el-table-column property="address" sortable label="添加次数">
                </el-table-column>
                <template slot="empty">
                  <TableEmpty />
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add-group-friend-footer">
      <el-button size="small" type="primary">确定创建任务</el-button>
      <el-button size="small">取消创建</el-button>
    </div>
  </div>
</template>
<script>
import AddKeyword from "@/components/AddKeyword/index2.vue";
import MultipleSelectSpread from "@/components/MultipleSelectSpread";
export default {
  data() {
    return {
      filter: {
        identity: [],
        nicktag:[],
        qykeyword:[],
      },
      isShow: true,
      drawerVisible: false,
      textarea: '',
      queryParams:{
        groupname:'',
        tag:[],
      },
      lableOpt: [
        {
          value: 1,
          label: "客户等级",
          show: true,
          children: ["一般", "重要", "核心"],
        },
        {
          value: 2,
          label: "客户等级2",
          show: false,
          children: ["一般2", "重要2", "核心2"],
        },
      ],
      dataSource: [],
      groupTags: [],
      groupList: [
        {id: 1, name: '群主/管理员'},
        {id: 2, name: '群主'},
        {id: 3, name: '群成员'},
      ],
      identityList: [
        { id: 1, name: '群主' },
        { id: 2, name: '群管理员' },
        { id: 3, name: '企微成员' },
        { id: 4, name: '黑名单' },
        { id: 5, name: '白名单' },
        { id: 6, name: '男性' },
        { id: 7, name: '女性' },
        { id: 8, name: '未知性别' }
      ],
      dates: [
        { id: 1, name: '3天内' },
        { id: 1, name: '5天内' },
        { id: 1, name: '7天内' },
      ]
    }
  },
  components:{
    AddKeyword,
    MultipleSelectSpread
  },
  methods: {
    onNavigationBack() {
      this.$router.go(-1);
    },
    onChangeFilterBox() {
      this.isShow = !this.isShow
    },
    onSearchGroup() {
      this.drawerVisible = !this.drawerVisible
    }
  },
}
</script>
<style lang="scss" scoped>
.group-friend-add-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .nav-back-header {
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid #e9e9e9;

    .back-title {
      .back-button {
        padding: 0;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .add-group-friend-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px 20px 100px;

    .add-group-friend-content {
      width: 1200px;

      .add-group-friend-filterbox {
        .head {
          display: flex;
          justify-content: space-between;
          padding: 12px 16px;
          .card-option {
            gap: 4px;
            color: #3070ff;
          }
        }
        .filter-wrap {
          padding: 0 16px 10px;
          .input-filter {
            .n-keyword {
              margin-right: 32px;
              div {
                margin-top: 6px;
              }
            }
          }
        }
      }
    }
    .add-group-friend-message {
      .item-label {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        white-space: nowrap;
        text-align: right;
        padding-top: 4px;
        width: 70px;
      }
    }

    .config-settig-card {
      background: #ffffff;
      margin-top: 12px;
      flex: 1 1;
      text-align: left;
      text-align: initial;
      color: rgba(0, 0, 0, 0.85);
      border-radius: 4px;
      background: #fff;
      font-size: 14px;
      min-height: 600px;
      overflow: hidden;
      overflow-y: scroll;

      .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;

        .card-title {
          padding: 16px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }

        .tips {
          color: rgba(0, 0, 0, .45);
          font-size: 14px;
          line-height: 22px;
          padding: 16px;

          a {
            color: #3070ff;
            text-decoration: none;
          }
        }
      }

      .card-content {
        font-size: 14px;
        line-height: 22px;
        display: flex;
        min-height: 600px;

        .add-group-friend-left {
          max-height: 600px;
          width: 320px;
          background-color: #fff;
          position: relative;
          .search {
            display: grid;
            grid-template-columns: 145px 96px 31px;
            column-gap: 8px;
            padding: 0 16px;
            height: 65px;
            align-items: center;
            position: relative;
            z-index: 4;
            background: #fff;
            .refresh-btn {
              width: 31px;
              font-size: 14px;
              font-weight: 500;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .list {
            height: calc(100% - 65px);
            overflow: auto;
            position: relative;
            padding: 0 16px;

            .room-item {
              margin-bottom: 4px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 10px;
              cursor: pointer;
              border-radius: 4px;

              &.active {
                background-color: rgba(47, 84, 235, .16);
              }

              &:hover {
                background-color: #fafafa;
              }

              .tag {
                padding: 0 8px;
                background-color: #fff;
                border-radius: 4px;
                border: 1px solid #eeeff6;
              }
            }
          }

          .drawer-model-wrap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;

            .drawer-model-content {
              position: relative;
              z-index: 2;
              overflow: auto;
              background-color: #fff;
              background-clip: padding-box;
              border: 0;
              height: 0;
              overflow: hidden;

              &.open {
                height: 308px;
                top: 65px;
              }

              .drawer-model-body {
                padding: 0px 15px 15px;

                .drawer-row-item {
                  margin-bottom: 15px;

                  .title {
                    margin-bottom: 5px;
                    font-size: 14px;
                    color: rgba(0, 0, 0, .85);
                  }
                  .input-rows {
                    display: flex;
                    align-items: center;
                    .delimiter {
                      display: inline-block;
                      margin: 0 8px;
                      font-size: 14px;
                      color: rgba(0,0,0,.25);
                    }
                  }
                }
              }

              .drawer-footer {
                padding: 10px 16px;
                border-top: 1px solid #e9e9e9;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }

            .drawer-model-mask {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, .45);
              z-index: 1;
            }
          }
        }

        .add-group-friend-right {
          flex: 1 1;

          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 65px;
          }
        }
      }
    }
  }
  .add-group-friend-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.x-input-select{
  ::v-deep .el-input-group__append{
    padding: 0 9px;
  }
}
</style>